<template>
  <div>
    <el-button type="primary" icon="ele-Plus" @click="showAddSpuForm">添加SPU</el-button>
    <el-table :data="spuList" border stripe style="margin: 20px 0">
      <el-table-column label="序号" type="index" width="80" align="center">
      </el-table-column>
      <el-table-column label="SPU名称" prop="spuName"> </el-table-column>
      <el-table-column label="SPU描述" prop="description"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-button type="success" size="small" icon="ele-Plus" title="添加sku" @click="showAddSkuForm(row)"></el-button>
          <el-button type="warning" size="small" icon="ele-Edit" title="修改spu"
            @click="showUpdateSpuForm(row)"></el-button>
          <el-button type="info" size="small" icon="ele-InfoFilled" title="查看spu的sku列表"
            @click="showSkuList(row)"></el-button>
          <el-button type="danger" size="small" icon="ele-Delete" title="删除spu" @click="deleteSpu(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- ------------------------------------------- -->
    <!--  @current-change="getTrademarkList"
      @size-change="handleSizeChange" -->
    <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[3, 5, 7, 10]"
      layout="prev, pager, next, jumper,->,sizes,total," :total="total" @current-change="getSpuList"
      @size-change="handleSizeChange" />

    <el-dialog :before-close="beforeClose" v-model="isShowDialog" :title="`${spu.spuName}名称的sku列表`">
      <el-table :data="skuList" v-loading="isLoading">
        <el-table-column property="skuName" label="名称" width="150" />
        <el-table-column property="price" label="价格" width="200" />
        <el-table-column property="weight" label="重量" />
        <el-table-column property="skuDefaultImg" label="默认图片">
          <template v-slot="{row,$index}">
            <el-image :src="row.skuDefaultImg"></el-image>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";


export default defineComponent({
  name: "SpuList", //组件名称
});
</script>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { useCategoryStore } from "@/stores/category";
import { storeToRefs } from "pinia";
import type { SpuData } from "@/api/spu";
import spuApi from "@/api/spu";
import skuApi ,{type SkuData}from '@/api/sku'

const emits = defineEmits(["changeState"]);

const categoryStore = useCategoryStore();
const { category3Id } = storeToRefs(categoryStore);
const page = ref(1);
const limit = ref(3);
const total = ref(0);

const spuList = ref<SpuData[]>([]);

const getSpuList = async (pager = 1) => {
  page.value = pager;
  // 发请求获取spu的分页列表
  try {
    const result = await spuApi.getPageList(
      page.value,
      limit.value,
      category3Id.value as number
    );
    spuList.value = result.records;
    total.value = result.total;
  } catch (error) {
    ElMessage.error("获取spu分页列表失败");
  }
};
watch(
  category3Id,
  (newVal, oldVal) => {
    if (newVal === "") {
      spuList.value = [];
    } else {
      getSpuList();
    }
  },
  { immediate: true }
);

const handleSizeChange = (size: number) => {
  limit.value = size;
  getSpuList();
};

// 点击按钮切换组件
const showAddSpuForm = () => {
  emits("changeState", 2);
};
const showUpdateSpuForm = (row: SpuData) => {
  emits("changeState", 2, row);
};
const showAddSkuForm = (row: SpuData) => {
  emits("changeState", 3, row);
};
//
const spu=ref<SpuData>({
    spuName: '',
    description: '',
    category3Id: '',
    tmId: '',
    spuSaleAttrList: [],
    spuImageList: [],
})
// 定义一个sku列表
const skuList=ref<SkuData[]>([])
const isLoading=ref(false)

//是否显示对话框dialog
const isShowDialog=ref(false)
//封装点击查看spu的sku列表回调 发请求
const showSkuList = async (row: SpuData) => {
  isShowDialog.value=true
  spu.value=row
  // skuList.value=[];  //在第二次点dialog前清掉 解决点击某一个查看spu的sku后，再点击其他的数据还在的bug,
  isLoading.value=true
try {
  const result=await skuApi.findBySpuId(row.id as number)
  skuList.value=result;
} catch (error) {
  ElMessage.error('获取sku的列表失败')
} finally{
  isLoading.value=false
}



};
const deleteSpu = async (row: SpuData) => {
  try {
    await spuApi.deleteSpu(row.id as number);
    ElMessage.success("删除spu成功");
    getSpuList();
  } catch (error) {
    ElMessage.error("删除spu失败");
  }
};

// ---------------------------------------------
// dialig 解决点击某一个查看spu的sku后，再点击其他的数据还在的bug 在关闭dialog之前清掉
const beforeClose=()=>{
skuList.value=[];
// 除了请空之外还可以对数据进行初始化
isLoading.value=false;
isShowDialog.value=false
}
</script>

<style lang="scss" scoped></style>